iT邦幫忙

第 12 屆 iThome 鐵人賽

1
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 45

[Re:PixiJS - Day45] 不同時期的學習 PixiJS 的過程與真完賽心得

  • 分享至 

  • xImage
  •  

來到這系列的最後一篇,除了心得結語外,也討論的學習 PixiJS 的過程


時期1:不考慮效能,這時期練的是能做出什麼

  • 會查找 API,試著用程式做動態,開心做出想做的就好
    由於不一定會有 視覺操作介面 GUI 協助,有些動態需要靠想像

[ Demo1 / Demo2 ]
兩個效果相近,差別在光暈設定,一個 distance1,另一個是 32

在 2017 年的 Android 手機上,已經開始會掉 FPS (左:60 / 右:48)

PIXI.filters.GlowFilter(1); // 左方 Demo,光暈設定較少

PIXI.filters.GlowFilter(32); // 右方 Demo,光暈設定較多

若再加上昨天的粒子效果,手機已幾乎無法操作,而筆電也會有些停頓
實作時知道是很吃效能的效果,但耗效能到決定放棄 Demo,僅以截圖呈現

  • 1: 隨著每次影格更新,重新繪製 Canvas 當素材使用 (方框)
    (方框有效能更好的實作方式,不是方框效果就很吃效能)
  • 2: 光暈效果,很吃效能的濾鏡
  • 3: 粒子

在此就不再多提效能問題,這次系列有不少篇有提到各種 效能問題 / 優化方式


時期2:遇到效能問題、優化問題

我放在 GitHub 上的 Demo,主要是練習效果、想做有趣的事情
比較像是上一個過程: 想做什麼就做什麼,開心好玩就好

當 PixiJS 是工作的一部份、會需要更謹慎的規劃時
就會開始考慮效能的優化、如何能使用得更好

查找的資料會越來越硬,也可能會踩到我這系列在寫的問題
這次的系列也寫給想多了解 PixiJS,或是在遇到問題時,有可能會從這系列找到答案


時期3:喜歡 PixiJS,也是我的一部份

再次提到,PixiJS 有適合的情境,但不是所有情境下都是最好的視覺動態工具
有些既存問題,但也確實好用

目前的工作會使用到 PixiJS,想繼續推 PixiJS,
有機會的話也會發些小 PR 到 PixiJS 的 Repo 上


鐵人賽,從開門寫到關門

9/1開賽 開始寫,到 10/15 這篇
前期的準備、開始備稿到寫完的三個月,仍然有很多不足夠
想寫的寫了,也有些雖然想寫但不完整的放著

心得: 與自己第 30 天的心得相同

如同一個 Release版本 ,這段日子的準備與執行在今天完成。

感謝看這系列的讀者、自己身邊的人,感謝自己


下一步?

  • 上次的系列有些需要更新,想把兩次的 PixiJS 整理起來

上一篇
[Re:PixiJS - Day44] pixi-particles 粒子效果 2/2:實作應用
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
monkianer
iT邦新手 5 級 ‧ 2020-11-03 17:45:10

謝謝分享!

感謝支持!

我要留言

立即登入留言